<template>
    <div class="imgShareContain" id ="imgShareContainId" >
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
            <a :class="['mui-control-item', {'mui-active':typeItem.id == 0}]" v-for="typeItem in typeList" :key="typeItem.id" @click="typeClick(typeItem.id)">
                {{typeItem.name}}
            </a>
        </div>

        <div class="imgMain" id="imgMainId">
            <ul>
                <router-link tag="li" :to="'/houser_info/'+houseItem.id"  v-for="houseItem in houseList" :key="houseItem.id" class="itemHouse">
                    <img  v-lazy.imgMainId="houseItem.imgUrl"/>
                    <div class="intro"> 
                        <h3>{{houseItem.title}}</h3>
                        <p>{{houseItem.address}}</p>
                    </div>
                </router-link>
            </ul>
        </div>

    </div>


            
    </div>    
</template>


<script>
import mui from "../../lib/mui/js/mui.min.js"
import {Toast} from 'mint-ui';

export default {

    created() {
        this.initType();
        this.getImageShareDataByType(0);
    },    
    data(){
        return {
            typeList:[],
            houseList:[],
        }
    },
    mounted() {
    mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 
        });
    },

    methods:{
        initType(){
            this.$http.get("imageshare/type").then(res=>{
               if(!res.ok){
                   Toast("获取数据失败");
                   return
               } 
               let data = res.body.data;
               this.typeList = data;
               let allType = {
                   id:0,
                   name:"全部"
               }
               this.typeList.unshift(allType);
            });
        },
        getImageShareDataByType(type){
            let option = {
                params:{
                    type:type
                }
            }
            this.$http.get("imageshare/get",option).then(res=>{
                if (!res.ok){
                    Toast("数据请求失败");
                    return
                }
                let data = res.body.data;
                this.houseList = data
            });
        },

        typeClick(type){
            this.getImageShareDataByType(type);
        },
    },

}






</script>


<style>
    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
        border: 0px;
    }

    ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    li{
         margin: 0px;
        padding: 0px;
        position: relative;
    }

    h3{
        margin: 0px;
        font-size: 14px;
    }

    .imgMain{
        margin-top: 40px;
    }

    .imgMain img{
        width: 100%;
        max-height: 400px;
        vertical-align:bottom; 
        display:block;
    }

    .imgMain .intro{
        color: aliceblue;
        background-color:#2e2e2e4f;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding: 5px;
    }
    .imgMain .intro p {
        margin: 0px;
        color: white;
        font-size: 13px;
    }

    
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
        color: aliceblue
    }

    .itemHouse{
        background-color: #999;
    }

    .mui-scroll{
        z-index: 5
    }



</style>

